<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- header -->
		<%@ include file="/WEB-INF/views/include/header.jsp"%>
		
	</head>
	<body class="no-skin">
		
	<div class="container">
	<div class="row clearfix">
		<div class="col-md-3 column">
			
			
			
		</div>
		<div class="col-md-3 column">
			
				<div id ="main2" style="width: 300px;height:300px;"  ></div>
			
		</div>
		<div class="col-md-3 column">
			
				<div id ="main3" style="width: 300px;height:300px;"  ></div>
		
		</div>
		<div class="col-md-3 column">
			
				<div id ="main4" style="width: 300px;height:300px;"  ></div>
			
	</div>
	<div class="row clearfix">
		<div class="col-md-6 column">
			
		</div>
		<div class="col-md-6 column">
			<div class="progress">
				<div class="progress-bar progress-bar-info" id="pro">20%好项目
				</div>
				<div class="progress-bar progress-bar-danger" id="pro2">80%大项目
				</div>
			</div>
		</div>
	</div>
</div>	
		<script src="<s:url value="/assets/dist/js/echarts.min.js"></s:url>"></script>
		<script type="text/javascript">
		   $().ready(function() {
	            var myChart = echarts.init(document.getElementById('main'));
	            //图表显示提示信息
	            myChart.showLoading();
	            //定义图表options
	            var options = {
	            		 title: {
	                         text: 'ECharts 入门示例'
	                     },
	                     tooltip: {},
	                     legend: {
	                         data:['销量']
	                     },
	                     xAxis: {
	                         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	                     },
	                     yAxis: {},
	                     series : [
	                               {
	                                   name:'蒸发量',
	                                   type:'bar',
	                                   data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
	                                 
	                               }
	                               
	                           ]
	                    
	            };

	            //通过Ajax获取数据
	            $.ajax({
	                type : "GET",
	                url : "/chart/show/chart2",
	                dataType : "json", //返回数据形式为json
	               // contentType:'application/json;charset=UTF-8',
	                success:function(result) {
	                	
	                    if (result) {
	                    	//alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
	                        //将返回的category和series对象赋值给options对象内的category和series
	                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
	                        options.xAxis.data = result.data.category;
	                        options.series[0].name = result.data.series[0].name;
	                       
	                        options.series[0].data = result.data.series[0].data;
	                        options.series[0].type = result.data.series[0].type;
	                     

	                        myChart.hideLoading();
	                        myChart.setOption(options); 
	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });
	            
	            
	            
	            var myChart2 = echarts.init(document.getElementById('main2'));
	            //图表显示提示信息
	            myChart2.showLoading();
	            //定义图表options
	            var options2 = {
	            		 title: {
	                         text: '不知道'
	                     },
	                     tooltip: {},
	                     legend: {
	                         data:['销量']
	                     },
	                     xAxis: {
	                         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	                     },
	                     yAxis: {},
	                     series : [
	                               {
	                                   name:'蒸发量',
	                                   type:'bar',
	                                   data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
	                                 
	                               }
	                               
	                           ]
	                    
	            };

	            //通过Ajax获取数据
	            $.ajax({
	                type : "GET",
	                url : "/chart/show/chart2",
	                dataType : "json", //返回数据形式为json
	               // contentType:'application/json;charset=UTF-8',
	                success:function(result) {
	                	
	                    if (result) {
	                    	//alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
	                        //将返回的category和series对象赋值给options对象内的category和series
	                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
	                        options2.xAxis.data = result.data.category;
	                        options2.series[0].name = result.data.series[0].name;
	                       
	                        options2.series[0].data = result.data.series[0].data;
	                        options2.series[0].type = result.data.series[0].type;
	                     

	                        myChart2.hideLoading();
	                        myChart2.setOption(options2); 
	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });
	            $("#pro").css("width","20%");
	 		   $("#pro2").css("width","80%");
	        });
		 
		   
		   
		</script>
	</body>
</html>